<template>
    <el-row class="container">
        <el-col :span="24" class="header">
            <el-col :span="10" class="logo" :class="collapsed?'logo-collapsed-width':'logo-width'">
                {{collapsed ? "" : sysName}}
            </el-col>
            <el-col :span="10">
                <div class="tools" @click.prevent="collapse">
                    <i class="fa fa-align-justify"></i>
                </div>
            </el-col>
            <el-col :span="4" class="userinfo">
                <el-dropdown trigger="hover">
                    <span class="el-dropdown-link userinfo-inner"><img :src="this.sysUserAvatar" />{{sysUserName}}</span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>我的消息</el-dropdown-item>
                        <el-dropdown-item>设置</el-dropdown-item>
                      <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-col>
        </el-col>
        <el-col :span="24" class="main">
            <aside :class="collapsed ? 'menu-collapsed' : 'menu-expanded'">
                <!--导航菜单-->



                <el-menu
                  default-active="2"
                  class="el-menu-vertical-demo"
                  @open="handleOpen"
                  @close="handleClose">
                  <el-submenu index="1">
                    <template slot="title">
                      <i class="el-icon-location"></i>
                      <span>导航一</span>
                    </template>
                    <el-menu-item-group>
                      <template slot="title">分组一</template>
                      <el-menu-item index="1-1">选项1</el-menu-item>
                      <el-menu-item index="1-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                      <el-menu-item index="1-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="1-4">
                      <template slot="title">选项4</template>
                      <el-menu-item index="1-4-1">选项1</el-menu-item>
                    </el-submenu>
                  </el-submenu>
                  <el-menu-item index="2">
                    <i class="el-icon-menu"></i>
                    <span slot="title">导航二</span>
                  </el-menu-item>
                  <el-menu-item index="3" disabled>
                    <i class="el-icon-document"></i>
                    <span slot="title">导航三</span>
                  </el-menu-item>
                  <el-menu-item index="4">
                    <i class="el-icon-setting"></i>
                    <span slot="title">导航四</span>
                  </el-menu-item>
                </el-menu>




            </aside>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        data(){
          return {
            sysName:"vue_myadmin",
            collapsed:false,
            sysUserName:"",
            sysUserAvatar:""
          }
        },
        methods:{
          handleOpen(key, keyPath) {
            console.log(key, keyPath);
          },
          handleClose(key, keyPath) {
            console.log(key, keyPath);
          },
          collapse(){
              this.collapsed = !this.collapsed;
          }

        },
        mounted(){
            var user = sessionStorage.getItem("user");
            if(user){
                user = JSON.parse(user);
                this.sysUserName = user.name || "";
                this.sysUserAvatar = user.avatar || "";
            }
        }
    }
</script>

<style lang="scss" scoped>
  @import '../styles/vars.scss';
  .container{
      position:absolute;
      top:0;
      bottom:0;
      width:100%;
      .header{
          height:60px;
          line-height: 60px;
          background: $color-primary;
          color: #fff;
          .userinfo{
              text-align: right;
              padding-right:35px;
              float:right;
              .userinfo-inner{
                  cursor:pointer;
                  color: #fff;
                  img{
                      width:40px;
                      height:40px;
                      border-radius:20px;
                      margin: 10px 0px 10px 10px;
                      float:right;
                  }
              }
          }
          .logo{
              height:60px;
              font-size:22px;
              padding-left:20px;
              padding-right:20px;
              border-color:rgba(238,241,146,0.3);
              border-right-width:1px;
              border-right-style:solid;
              img{
                  width:40px;
                  float:left;
                  margin:10px 10px 10px 18px;
              }
              .txt{
                  color:#fff;
              }
          }
          .logo-width{
              width:230px;
          }
          .logo-collapsed-width{
              width:60px;
          }
          .tools{
              padding:0px 23px;
              width:14px;
              height:60px;
              line-height: 60px;
              cursor:pointer;
          }
      }
  }
</style>
